<template>
  <!-- 修改多列信息 -->
  <Top-Page class="modifys-wrap">
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #content>{{ title }}</template>
      <template #right>
        <template v-if="!checkboxShow">
          <view class="cu-custom__right-btn cu-custom__right-btn-1" @click="checkboxShow = !checkboxShow">管理</view>
          <view class="cu-custom__right-btn" @click="toSetValue(type, '新增信息', `&index=${list.length}`)">新增</view>
        </template>

        <template v-else>
          <view class="cu-custom__right-btn" @click="checkboxShow = !checkboxShow">退出管理</view>
          <view class="cu-custom__right-btn delete-btn" @click="checkboxChage">删除</view>
        </template>
      </template>
    </cu-custom>

    <view class="hint" v-if="maxlength != -1">可设置{{ maxlength }}条信息</view>
    <checkbox-group @change="onChange">
      <view class="list" v-for="(item, index) in list" :key="item">
        <Cell :content="item">
          <view
            v-if="!checkboxShow"
            class="iconfont icon-m01"
            @click.stop="toSetValue(type, '修改信息', `&index=${index}&text=${item}`)"
          ></view>
          <checkbox v-else :value="index" />
        </Cell>
      </view>
    </checkbox-group>
  </Top-Page>
</template>

<script>
import Cell from '@/components/Cell/Cell.vue';

import pinia from '@/store/index';
import { useloginStore } from '@/store/login';
const loginStore = useloginStore(pinia);

import { saveInfo } from '@/hooks/useSaveChanges';
export default {
  data() {
    return {
      saveInfo,
      checkboxShow: false,
      checkboxList: [],
      type: '',
      title: '设置',
      leftText: '取消',
      rightText: '完成',
      maxlength: -1,
      list: [],
      value: ''
    };
  },
  components: { Cell },
  onLoad(params) {
    this.type = params.type;
    this.title = params.title ?? '设置';
    this.leftText = params.leftText ?? '取消';
    this.rightText = params.rightText ?? '完成';
    this.maxlength = Number(params.maxlength || '-1');
  },
  onShow() {
    this.userInfo = JSON.parse(JSON.stringify(loginStore.userInfo));
    this.list = this.userInfo[this.type];
  },
  methods: {
    //设置/修改 内容
    toSetValue(type, title, extra) {
      if (title != '新增信息' || this.maxlength === -1 || (this.maxlength != -1 && this.list.length < this.maxlength)) {
        uni.navigateTo({
          url: `/pages/rest/modify/modify?type=${type}&title=${title}${extra || ''}`
        });
      } else {
        uni.showToast({
          title: `最多只能添加${this.maxlength}条信息`,
          icon: 'none'
        });
      }
    },
    //删除
    checkboxChage() {
      this.checkboxList
        .sort((a, b) => b - a)
        .forEach((item) => {
          this.list.splice(item, 1);
        });
      this.saveInfo({ [this.type]: this.list });

      this.checkboxShow = !this.checkboxShow;
    },
    onChange(e) {
      const value = e.detail.value;
      this.checkboxList.length = 0;
      this.checkboxList.push(...value);
    }
  }
};
</script>

<style lang="scss" scoped>
.modifys-wrap {
  width: 750rpx;
  min-height: 100vh;
  background-color: #fff;

  :deep(.nav-content) {
    justify-content: flex-start;
  }

  :deep(.cu-custom__right) {
    .cu-custom__right-btn-1 {
      background-color: #999;
    }

    .delete-btn {
      background-color: #ee0a24;
    }
  }

  .hint {
    color: #999;
    padding: 30rpx;
  }

  .cell :deep(.cell-content) {
    text-align: left;
  }

  .icon-m01 {
    flex-shrink: 0;
    margin-left: 12rpx;
  }
}
</style>
